<template>
  <!-- 设置轮胎规格 -->
  <view class="setting-tyre-container">
    <view class="top-img">
      <image
        src="https://files.yzsheng.com/bussiness/imgs/luntaiguige.png"
        mode="widthFix"
        class="img"
      ></image>
    </view>

    <view class="input-section">
      <view class="input-box flex flex-ai-c flex-jc-sb">
        <view class="item-input">
          <input v-model="width" type="text" placeholder="请输入胎面宽" placeholder-style="color: #999;" >
        </view>
        
        <view class="item-input">
          <input v-model="propor" type="text" placeholder="请输入扁平比" placeholder-style="color: #999;">
        </view>
        
        <view class="item-input">
          <input v-model="diam" type="text" placeholder="请输入直径" placeholder-style="color: #999;">
        </view>
      </view>
    </view>
    
    <!-- 按钮 -->
    <view class="btn-confirm">
      <button class="btn-bg-yellow btn" @click="handleVal()">确定</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      width: '',
      propor: '',
      diam: ''
    }
  },
  
  methods: {
    tips(title) {
      uni.showToast({
        title,
        icon: 'none'
      })
    },
    
    handleVal() {
      if (!this.width) {
        this.tips('请填写胎面宽')
        return false
      }
      if (!this.propor) {
        this.tips('请填写扁平比')
        return false
      }
      if (!this.diam) {
        this.tips('请填写直径')
        return false
      }
      this.confirm()
    },
    
    confirm() {
      // let data = {
      //   width: this.width,
      //   propor: this.propor,
      //   diam: this.diam
      // }
      let data = JSON.stringify({
        name: `${this.width}${this.propor}${this.diam}`
      })
      uni.redirectTo({
        url: `/pages_afterSales/tyre/adaptTyre?value=${data}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-tyre-container {
  .top-img {
    padding: 0 24rpx;
    
    .img {
      width: 100%;
    }
  }
  
  .input-section {
    padding: 0 24rpx;
    margin-top: 14rpx;
  }
  
  .input-box {
    height: 120rpx;
    background: #FFFFFF;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
    border-radius: 10rpx;
    
    .item-input {
      height: 50rpx;
      text-align: center;
      
      & + .item-input {
        border-left: 1px solid #eee;
      }
      
      input {
        height: 100%;
        line-height: 50rpx;
        font-size: 28rpx;
      }      
    }
    
  }
  
  .btn-confirm {
    position: fixed;
    bottom: 42rpx;
    left: 0;
    width: 100%;
    padding: 0 24rpx;
    
    .btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      margin: 0;
      fong-size: 32rpx;
      color: #333;
    }
  }
}
</style>
